<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport"
	content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="/common/css/monitor/index_server_info.css" rel="stylesheet" />
<link rel="stylesheet" href="/common/css/monitor/index_monitor.css"
	type="text/css" media="screen" />
<!-- 下拉 -->
	<link href="/css/plugins/chosen/chosen.css" rel="stylesheet">
</head>
<style type="text/css">
.ih-item.circle.effect1 .spinner {
	width: 170px;
	height: 170px;
}

.ih-item.circle, .ih-item.circle .img {
	width: 170px;
	height: 170px;
}

.ih-item.circle.effect1 .info h3 {
	margin: 0 0px;
	padding: 47px 0 0;
}

.ih-item.circle.effect1 .info {
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
}

.case-item {
	margin: 32px 26px;
}

.btn-w-m {
	min-width: 50px;
}

.btn {
	outline: none;
}

.btn:focus {
	outline: 0;
}
.ih-item.circle.effect1 .info p{
   margin: -32px 15px;
}
.deleteProject{
	display: inline-block;
	width: 170px;
	text-align: center;
	margin: 10px 0px;
	font-size: 10px;
}
.addIcon{
color: #FFF; background-color: #1c84c6 !important; position: absolute; top: 15px; right: 50px; font-size: 24px;
}
</style>
<body style="background-color: #f3f3f4;">
	<div style="position: relative;">
		<div id="">
			<!-- Row开始Start -->
			<div class="case-content" id="projectList"></div>
			<!-- row结束End -->
		</div>
		<button id="createIndex" type="button" class="btn btn-w-m btn-white addIcon">+</button>
	</div>
	<!-- End Panel Other -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/common/petecat.js"></script>
	<script src="/common/form.js"></script>
	<!-- HTML之间的传值 -->
	<script src="/js/jquery.params.js"></script>
	<script src="/js/plugins/layer-pc/layer.js"></script>
	<script src="/js/jquery.cookie.js"></script>
   <!-- 组件通用 -->
    <script src="/common/frame.js"></script>
    <!-- 下拉 -->
	<script src="/js/plugins/chosen/chosen.jquery.js"></script>
	<!-- eCharts图表 -->
	<script src="/js/plugins/echarts/echarts-all.js"></script>
	<script type="text/javascript">
		$(function() {
			initProjectInfo();
		});
		var projectArray = new Array();
		$("#projectList").on("click",'.criter',function(){
			var configData = null;
			var id = $(this).find('input').val();
			var title = $(this).find("h3").text();
			$.ajax({
				type:'get',
				url: BASE_URL+"/base/custom/getCustomByProjectId?projectId="+id,
				async:false,
	            success: function (result) {
	            	if(result.code == SUCCESS_CODE){
	            		if(result.data != null){
	            			configData = result.data;
	            		}
	            	} 
	            	
	            },
	            beforeSend:function(xhr){
	            	xhr.setRequestHeader('Authorization','Bearer '+getSessionData('userToken'));
	            }
			});
			if(configData != null){
				url = '/monitor/custom_update_config.html';
			}else{
				url = '/monitor/custom_add_config.html';
			}
			var status =JSON.parse('[{"key":"1","value":"启用"},{"key":"0","value":"禁用"}]');
			layer.open({
				type:2,
				title:title+"硬件自定义",
				shade: 0.8,
				area: ['33%', '55%'],
                content: [url, 'auto'],
                success:function(layers,index){
                	var body = layer.getChildFrame('body', index);
                	body.find("#projectName").val(title);
                	if(configData != null){
                		body.find("#configId").val(configData.id);
                		var cpuItem = {
                			id:"isShowCPU",
                			data:status,
                			key:"key",
                			name:"value",
                			value:configData.showCpu,
                			body:body
                		};
                		updSelVal(cpuItem);
                		
                		//内存
                		var cpuItem = {
                			id:"isShowMEM",
                			data:status,
                			key:"key",
                			name:"value",
                			value:configData.showMem,
                			body:body
                		};
                		updSelVal(cpuItem);
                		
                		//磁盘
                		var cpuItem = {
                			id:"isShowDisk",
                			data:status,
                			key:"key",
                			name:"value",
                			value:configData.showDisk,
                			body:body
                		};
                		updSelVal(cpuItem);
                		
                	}else{
                		body.find("#projectId").val(id);
                	}
                	
                }
			});
		});
		
		$("#createIndex").click(function(){
			layer.open({
				type:2,
				title:"添加自定义项目",
				shade: 0.8,
				area: ['70%', '70%'],
                content: ['/monitor/custom_add_project.html', 'auto'], 
                end: function(){ 
                	location.reload();
                }
			});
		});
		
		$("#projectList").on("click",'.deleteProject',function(){
			var projectId = $(this).parent().find(".id").val();
			var req = {};
			req['reqJSON'] = {
				type : 'delete',
				url : BASE_URL + '/base/custom/removeUserProjectById?peojectId='+projectId
			};
			req['successFn'] = function(respData) {
				if (respData.code == SUCCESS_CODE) {
					layer.msg(respData.message, {icon : 1});
					projectArray.remove(projectId);
					location.reload();
				} else {
					layer.msg(respData.message, {
						icon : 2
					});
				}
			};
			ajaxRequest(req);
		});
		//初始化项目列表
		function initProjectInfo() {
			var req = {};
			req['reqJSON'] = {
				type : 'get',
				url : BASE_URL + '/base/project/queryCustomByUserId'
			};
			req['successFn'] = function(respData) {
				if (respData.code == SUCCESS_CODE) {
					if(respData.data.length == 0){
						$("#projectList").html("<h1 align='center'>您还没有添加自定义页面,请点击右边加号,添加自定义项目!</h1>");
						return;
					}
					$.each(respData.data,function(index,item){
						projectArray.push(item.id);
					});
					var peojectListHTML = projectAppendHtml(respData.data);
					$("#projectList").html(peojectListHTML.toString());
				} else {
					layer.msg(respData.message, {
						icon : 2
					});
				}
			};
			ajaxRequest(req);
		}

		//拼接HTML到页面中
		function projectAppendHtml(projectList) {
			var sb = new StringBuffer();
			$.each(projectList,function(index, item) {
								sb.append('<div class="case-item">'
												+ '			<div class="ih-item circle effect1">'
												+ '			<input type="hidden" class="hidTok" value='+item.token+'>'
												+ '		<div class="criter">'
												+ '			<input type="hidden" class="id" value='+item.id+'>'
												+ '					<div class="spinner"></div>'
												+ '					<div class="info">'
												+ '						<div class="info-back">'
												+ '							<h3>' + item.text
												+ '</h3>' + '<p>服务器开机数：'+item.userServerCount+'台<br/>服务器总数量：'+item.serverTotal+'台</p>'
												+ '						</div>'
												+ '					</div>' + '				</div>'
												+ '			</div><a class="deleteProject">删除</a>' + '</div>');
							});
			return sb;
		}
		//实例化StringBuffer
		function StringBuffer() {
			this._strings_ = new Array();
		}

		StringBuffer.prototype.append = function(str) {
			this._strings_.push(str);
		};

		StringBuffer.prototype.toString = function() {
			return this._strings_.join("");
		};
		Array.prototype.indexOf = function (val) {
		    for (var i = 0; i < this.length; i++) {
		        if (this[i] == val) return i;
		    }
		    return -1;
		};

		Array.prototype.remove = function (val) {
		    var index = this.indexOf(val);
		    if (index > -1) {
		        this.splice(index, 1);
		    }
		};
	</script>

</body>
</html>